<template>
  <div class='online-people'>
    <el-card class="onlinePeople-card">
      <el-tabs v-model="activeName">
        <el-tab-pane
          label="在线听课人数"
          name="first"
        >
          <!-- echarts 折线图 -->
          <div
            id="myChart"
            :style="{width: '100%', height: '400px'}"
          ></div>
        </el-tab-pane>
      </el-tabs>

      <el-row
        type="flex"
        class="row-bg"
        justify="end"
      >
        <!-- 按周,月,年 -->
        <el-col
          :span="13"
          class="col_btns"
        >
          <el-button
            size="small"
            @click="dateBtn('weekClass')"
            :class="{ active: weekClass }"
          >按周</el-button>
          <el-button
            size="small"
            @click="dateBtn('monthClass')"
            :class="{ active: monthClass }"
          >按月</el-button>
          <el-button
            size="small"
            @click="dateBtn('yearClass')"
            :class="{ active: yearClass }"
          >按年</el-button>
        </el-col>
        <!-- 日期选择器 -->
        <el-col
          :span="11"
          class="col_date"
        >
          <div class="block">
            <el-date-picker
              v-model="value1"
              :type="type"
              :placeholder="placeholder"
              :format="format"
              @change="change()"
            >
            </el-date-picker>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <div class="empty"></div>

    <!--整个页面内容是个卡片-->
    <el-card class="onlinePeople-card2">
      <!-- 表格 -->
      <el-table
        :data="onlinePeopleData"
        style="width: 100%"
        border
        highlight-current-row
        :header-cell-style="{'text-align':'center',background:'#F5F7FA',color:'#888', height: 60 + 'px'}"
        :cell-style="{'text-align':'center'}"
        :row-style="{height: 50 + 'px'}"
      >
        <el-table-column
          prop="day"
          label="时间"
          width="200"
        >
        </el-table-column>
        <el-table-column
          prop="onlineNum"
          label="在线听课人数"
        >
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagenum"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import {getOnlinePeople} from '@/api/course'
export default {
  name: 'onlinePeople',
  components: {},
  props: {},
  data () {
    return {
      activeName: 'first',
      value1: new Date(),
      type: 'week',
      placeholder: '选择周',
      format: 'yyyy 年 第 WW 周',
      weekClass: true,
      monthClass: false,
      yearClass: false,
      params:{
        startDate: '',
        endDate: ''
      },
      options: {
          tooltip: {},
          lineStyle: {
              color:'#2075f1'
          },
          xAxis: {
          type: 'category',
          boundaryGap: false,
          data: []
          },
          yAxis: {
              type: 'value'
          },
          series: [{
              data: [],
              type: 'line',
              smooth: true,
              areaStyle: {
                color:'#f3fffe'
              }
          }]
      },
      onlinePeopleData: [], // 表格数据
      echartsData: [],
      pagenum: 1,  // 默认显示的页码
			pagesize: 10,  // 每页显示条数
			total: 0,  // 总数
    }
  },
  computed: {},
  watch: {},
  methods: {
    dateBtn(val) {
      if(val === 'weekClass') {
        this.type = 'week'
        this.placeholder = '选择周'
        this.format = 'yyyy 年 第 WW 周'
        this.weekClass = true
        this.monthClass = false
        this.yearClass = false

      } else if(val === 'monthClass') {
        this.type = 'month'
        console.log(this.type);
        this.placeholder = '选择月'
        this.format = 'yyyy 年 第 MM 月'
        this.weekClass = false
        this.monthClass = true
        this.yearClass = false

      } else {
        this.type = 'year'
        this.placeholder = '选择年'
        this.format = 'yyyy 年'
        this.weekClass = false
        this.monthClass = false
        this.yearClass = true
      }

      this.change()
    },
    // echarts 图表绘制
    async drawLine() {
      // 清空上一次数据
      if(this.options.xAxis.data.length !== 0 || this.options.series[0].data.length !== 0) {
        this.options.xAxis.data = []
        this.options.series[0].data = []
      }

      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))

      // 发送请求,获取数据
      const {data} = await getOnlinePeople(this.params)
      console.log(data);

      // 设置分页
      var startPage = (this.pagenum - 1) * this.pagesize
			var endPage = this.pagenum * this.pagesize
			console.log(startPage,endPage)  

      this.echartsData = data.result
      this.onlinePeopleData = data.result.slice(startPage ,endPage)
      this.total = data.result.length
    
      console.log(this.echartsData)
      console.log(this.onlinePeopleData)
      // console.log(this.total)

      // 添加数据
      this.echartsData.forEach(item => {
        this.options.xAxis.data.push(item.day)
        this.options.series[0].data.push(item.onlineNum)
      })
      
      // 清除上一次图表
      myChart.clear()
      // 绘制图表
      myChart.setOption(this.options)
    }, 
    // 页面条数的变化
    handleSizeChange(newSize) {
      this.pagesize = newSize
      // console.log(this.pagesize)
      this.pagenum = 1

      this.drawLine()
    },
    // 页码值的变化
    handleCurrentChange(newNum) {
      this.pagenum = newNum
      // console.log(this.pagenum)

      this.drawLine()
    },
    // 监听日期选择器日期变化
    change() {
      // console.log(e);
      if(this.type === 'week') {
        // 周改变事件
        // 起始日期
        // console.log(this.value1);
        var d = new Date(this.value1)
        var youWant = d.getFullYear().toString() + '-' + (d.getMonth() + 1).toString().padStart(2,'0') + '-' + (d.getDate() - 1).toString().padStart(2,'0') 
        this.params.startDate = youWant
        console.log(this.params.startDate)

        // 终止日期
        var d2 = new Date(+new Date(this.value1) + 5 * 86400000)
        var youWant2 = d2.getFullYear().toString() + '-' + (d2.getMonth() + 1).toString().padStart(2,'0') + '-' + d2.getDate().toString().padStart(2,'0')
        this.params.endDate = youWant2
        console.log(this.params.endDate)

      }else if(this.type === 'month') {
        // 月改变事件
        let date = new Date(this.value1)
        let year = date.getFullYear().toString()
        let month = (date.getMonth() + 1).toString().padStart(2,'0')
        let startMonth = year + '-' + month + '-' + '01'
        let day = new Date(year,month,0)
        let endMonth = year + '-' + month + '-' + day.getDate() 

        console.log(startMonth)
        console.log(endMonth)
        
        this.params.startDate = startMonth
        this.params.endDate = endMonth
      }else {
        // 年改变事件
        var date = new Date(this.value1)
        var startYear = date.getFullYear() + '-' + '01' + '-' + '01'
        var endYear = date.getFullYear() + '-' + '12' + '-' + '31' 

        console.log(startYear);
        console.log(endYear);

        this.params.startDate = startYear
        this.params.endDate = endYear
      }
      this.pagenum = 1
      this.drawLine()
    },
  },
  created () {
    this.change()
  },
  mounted () {
    this.drawLine()
  }
}
</script>

<style lang='less' scoped>
/deep/ .onlinePeople-card {
  position: relative;
  min-height: 500px;
  margin-top: 10px;
  .el-tabs__nav-wrap::after {
    width: 108px;
    transform: translateX(0px);
  }
  .el-tabs__item {
    font-size: 18px !important;
  }
  .el-tabs__item.is-active {
    color: #185fef !important;
  }
  .el-tabs__active-bar {
    height: 4px !important;
    border-radius: 2px;
    background-color: #65ded7 !important;
  }

  .el-row {
    position: absolute;
    top: 30px;
    right: 100px;
    
    .col_btns {
      line-height: 40px;
      .el-button {
        border: none;
      }
      .el-button:hover, .el-button:focus {
        color: teal;
        border-color: #b3d9d9;
        background-color: #e6f2f2;
      }
      .active {
        background-color: #079fff !important;
        color: #fff !important;
      }
    }
    .col_date {
      margin-left: 40px;
    }
  }
}
/deep/ .el-picker-panel {
  position: absolute;
  z-index: 9999;
  top: 135px !important;
  left: 1249px;
}
.empty {
  height: 20px;
  background-color: #f5f5f5;
}
.onlinePeople-card2 {
  padding: 30px;
  .el-table {
    margin-bottom: 20px;
  }
  .el-pagination {
    float: right;
  }
}
/deep/ .canvas {
  width: 1600px !important;
}
</style>